<template>
  <div class='sys-title'>
    <img src="../../assets/img/webicon/rongpan-logo.png" alt="">
    <transition name="fade">
      <span v-if="!isCollapase">资产管理系统</span>
    </transition>
  </div>
</template>

<script lang='ts' setup>
interface IProps {
  isCollapase: boolean
}
withDefaults(defineProps<IProps>(), {
  isCollapase: false
})
</script>

<style scoped lang='scss'>
.sys-title{
  position: relative;
  height:55px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18px;
  font-weight: 400;
  img{
    width: 35px;
    height: 27px;
  }
  span{
    margin-left: 10px;
  }
}
.fade-enter-active{
  transition: opacity 0.5s ease-in;
}

.fade-enter-from {
  opacity: 0;
}
</style>
